<template>
	<view class="container con_por">
		<view class="sticky_box">
			<view class="cell_box" @click="openPup">
				<view class="cell_text">{{selectText}}</view>
				<view class="cell_icon">
					<u-icon name="arrow-down" color="#fff"></u-icon>
				</view>
			</view>
		</view>
		<view class="pro_list">
			<u-row v-for="item,index in projectList" :key="index">
				<view class="pro_item" @click="handleToDetail(item)">
					<view class="cont_left">
						<view class="l_name ellipsis">{{item.title}}</view>
						<view class="l_village ellipsis">{{item.village}}</view>
						<view class="l_jianli ellipsis">监理:{{item.jianli_name}}</view>
					</view>
					<view class="cont_right">{{item.addtime}}</view>
				</view>
			</u-row>
		</view>

		<u-action-sheet :show="show" :actions="filterOptions" title="选择筛选条件" @close="show = false"
			@select="handleSelect">
		</u-action-sheet>
		<!-- 加载loading -->
		<kj-loading ref="kjLoading" :loadmore="loadmore" :loaddone="loaddone" :abnor="abnor"></kj-loading>
		<!-- 新增项目 -->
		<view v-if="iscanadd" class="round-click" @click="handleAddProject()">
			<u-icon name="plus" size="20px" color="#fff"></u-icon>
		</view>
	</view>
</template>

<script>
	import {
		getPage
	} from '../../utils/config';
	import {
		imageCdn
	} from '../../utils/api';
	import {
		prosimify,
		$toast,
		http,
		storage
	} from '../../utils/utils';
	import wxApi from '../../utils/wxApi';
	import api from '../../utils/api';
	const app = getApp();
	export default {
		data() {
			return {
				localInfo: {},
				logged: null,
				userId: 0,
				departmentid: null,
				iscanadd: false,
				loadmore: true,
				loaddone: false,
				abnor: false,
				pageIndex: 1,
				ListPages: 0,
				show: false,
				selectText: '慕名',
				selectId: 0,
				projectList: [],
				filterOptions: [],
			}
		},
		onShow() {
			//判断是否登录
			app.globalData
				.getLogin()
				.then((res) => {
					console.log('登录信息--------->', res)
					this.pageIndex = 1
					this.localInfo = res;
					this.logged = res.code;
					this.userId = res.data.userid;
					// departmentid 1-管理 2-财务 3-监理 4-设计 5-业务
					this.departmentid = res.data.departmentid;
					this.companyid = res.data.companyid;
					this.selectId = res.data.companyid;
					this.iscanadd = res.data.iscanadd;
					this.getHomePage()
					this.getProjectList()
				}).catch((res) => {
					this.logged = res
					this.goLogin();
				}).finally(() => {
					this.initial = 1;
				});
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {
			let {
				pageIndex,
				ListPages,
				loadmore
			} = this;
			//未请求完且未在加载中
			if (ListPages > pageIndex && !loadmore) {
				pageIndex++;
				loadmore = true;

				//显示加载效果
				this.pageIndex = pageIndex
				this.loadmore = loadmore
				uni.showNavigationBarLoading();

				//请求数据
				this.getProjectList(false);
			}
		},


		methods: {
			/**
			 * 获取首页数据
			 * apphome
			 * userid  当前登录用户ID
			 */
			getHomePage() {
				let data = {
					action: 'apphome',
					userid: this.userId,
					companyid: this.companyid
				}
				http.post(api.default, {
					data
				}).then(res => {
					var options = res.data.data.companylist
					options.forEach(item => {
						item['name'] = item.title
					})
					console.log('dayin:then获取首页数据~~~~', options)
					this.filterOptions = options
					var defaultCompony = options.find(com => {
						return com.id == this.companyid
					})
					this.selectText = defaultCompony.name
				})
			},

			/**
			 * 获取项目
			 * getprojects
			 * userid  当前登录用户ID
			 * pageindex 当前页码
			 */
			getProjectList(cb = true) {
				let {
					userId,
					pageIndex,
					ListPages,
					loadmore,
					selectId,
					departmentid
				} = this;
				let data = {
					action: 'getprojects',
					userid: userId,
					pageindex: pageIndex,
					companyid: selectId,
					departmentid: departmentid
				}
				http.post(api.default, {
					data
				}).then(res => {
					let {
						data
					} = res.data
					console.log('dayin:获取项目~~~~', data)
					//是否加载完毕
					if (cb) {
						this.projectList = data.list
					} else {
						this.projectList = this.projectList.concat(data.list)
						//隐藏加载效果
						uni.hideNavigationBarLoading();
					}
					this.ListPages = data.pages;

					if (pageIndex == data.pages) {
						this.abnor = false;
						this.loaddone = true;
					}
					if (this.projectList.length < 1) {
						this.abnor = true;
						this.loaddone = false;
					}

					this.loadmore = false;
				})
			},

			// 跳转项目详情
			handleToDetail(item) {
				wxApi.navigateTo(
					getPage.detail,
					Object.assign({}, {
						id: item.id
					}));
			},

			// 跳转添加项目
			handleAddProject() {
				wxApi.navigateTo(getPage.editProject, {
					userid: this.userId,
					companyid: this.companyid,
					departmentid: this.departmentid,
					iscanadd: this.iscanadd
				});
			},

			// 下拉筛选
			handleSelect(item) {
				console.log('select~~~~~~~~~~', item)
				this.selectText = item.name
				this.selectId = item.id
				this.show = false
				// 重新请求数据
				this.pageIndex = 1
				this.getProjectList()
			},

			openPup() {
				this.show = !this.show
			},

			/**
			 * 
			 * 跳转登录
			 */
			goLogin() {
				console.log('打印-跳转登录~~~')
				wxApi.setStartPage();
				wxApi.navigateTo(getPage.login);
			},
		}
	}
</script>

<style scoped>
	.con_por {
		position: relative;
	}

	.sticky_box {
		box-sizing: border-box;
		position: fixed;
		top: 0;
		z-index: 9;
		width: 100%;
		padding: 0 10px;
		margin: 0 auto;
	}

	.cell_box {
		position: relative;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 94rpx;
		border-radius: 20rpx;
		background-color: #232773;
		color: #fff;
	}

	.cell_icon {
		position: absolute;
		top: 34rpx;
		right: 40rpx;
	}

	.pro_list {
		box-sizing: border-box;
		padding: 10px;
		padding-top: 120rpx;
		width: 100%;
	}

	.pro_item {
		display: flex;
		position: relative;
		justify-content: start;
		margin-bottom: 10px;
		padding: 10px;
		border-radius: 5px;
		background-color: #fff;
		width: 100%;
	}

	.cont_left {}

	.l_name {
		font-size: 18px;
		font-weight: 500;
		width: 200px;
	}

	.l_village {
		margin: 8px 0 4px;
		font-size: 12px;
		width: 200px;
	}

	.l_jianli {
		font-size: 12px;
		color: #8b8b8b;
		width: 200px;
	}

	.cont_right {
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 12px;
		color: #8b8b8b;
	}

	.round-click {
		height: 100rpx;
		width: 100rpx;
		background-color: #232773;
		border-radius: 100%;
		position: fixed;
		bottom: 30px;
		right: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9;
	}
</style>
